<template>
	<div class="layout-padding" id="layout-app" style="overflow-y: auto">
		<div class="main">
			<el-row :gutter="20">
				<el-col :span="12" class="mb20">
					<div class="box-bar">
						<div class="user-box">
							<div class="s1-row">
								<div class="tx-wrap">
									<img class="img" src="/@/assets/t.jpg" alt="" sizes="" srcset="" />
								</div>
								<div class="user-wrap">
									<div class="user-s1">
										<div class="name">{{ userInfo.name }}</div>
										<div class="sc-wrap" @click="CollectionChange" :class="userInfo.collectId && 'active'">
											<img src="/@/assets/iconRC/sc01.png" alt="" sizes="" srcset="" />
											<div class="text" v-if="userInfo.collectId">{{ t('pages.Collected') }}</div>
											<div class="text" v-else>{{ t('pages.Favorite') }}</div>
										</div>
									</div>
									<div class="bq-wrap">
										<el-tag class="tag" :type="tagColor(index)" effect="plain" v-for="(item, index) in userInfo.tagList" :key="item.id">{{
											item.label
										}}</el-tag>
									</div>
								</div>
							</div>
							<div class="s2-row">
								<div class="row-item">
									<div class="text">
										{{ t('pages.Institution') }}: <span class="s1" @click="toUrlAgency(userInfo.company)">{{ userInfo.company }}</span>
									</div>
								</div>
								<div class="row-item">
									<div class="text">
										{{ t('pages.Adress') }}:<span>{{ userInfo.address }}</span>
									</div>
								</div>
								<div class="row-item">
									<div class="text">
										{{ t('pages.Industries_of_main') }}: <span class="">{{ userInfo.mainIndustries }}</span>
									</div>
								</div>
								<div class="row-item">
									<div class="text">
										{{ t('pages.Industry_segmentation_field') }}:
										<span class="s1" @click="toUrlIndustry(item)" v-for="item in userInfo.subdivideList" :key="item.id">{{ item.label }}</span>
									</div>
								</div>
							</div>
						</div>
					</div>
				</el-col>
				<el-col :span="12" class="mb20">
					<div class="box-bar">
						<div class="cx-box">
							<div class="box-left" :class="locale == 'en' && 'en'">
								<div class="left-p">
									<img class="img" src="/@/assets/iconRC/sx01.png" alt="" /><span class="s0">{{ t('pages.Comprehensive_score_of_innovation_ability') }}：</span
									><span class="s1">{{ userInfo.overallRating }}</span
									><span class="s2">分</span>
								</div>
								<div class="left-p">
									<img class="img" src="/@/assets/iconRC/sx02.png" alt="" /><span class="s0">{{ t('pages.Ranking_of_the_score_in_the_industry') }}：</span
									><span class="s1">{{ userInfo.industryRank }}</span
									><span class="s2"></span>
								</div>
								<div class="left-p">
									<img class="img" src="/@/assets/iconRC/sx03.png" alt="" /><span class="s0">{{ t('pages.Ranking_of_the_score_in_the_institution') }}：</span
									><span class="s1">{{ userInfo.mechanismRank }}</span
									><span class="s2"></span>
								</div>
							</div>
							<TvvjG8Charts class="TvvjG8Charts" :talentId="route.query.talentId" :style="'width: 500%;height: 378px;'"></TvvjG8Charts>
						</div>
					</div>
				</el-col>
			</el-row>
			<div class="box-bar-row" id="c1Ref">
				<el-row :gutter="20">
					<el-col :span="24" class="mb20">
						<div class="title-wrap">
							<div class="title-left-wrap">
								<div class="title">{{ t('pages.Innovation_vitality') }}</div>
								<div class="dec">通过“创新活动年数”、“创新活动周期”、“最长创造力维持周期”角度进行评价，并分别给出在本产业的排名。</div>
							</div>
							<div class="sm-wrap">
								<el-popover placement="top-start" :title="t('pages.Indicator_Description')" :width="300" trigger="hover">
									<template #reference>
										<div class="sm-wrap-s1">
											<img class="img" src="/@/assets/iconRC/wh.svg" alt="" sizes="" srcset="" />
											<span>{{ t('pages.Indicator_Description') }}</span>
										</div>
									</template>
									<div>
										创新活动年数：有发明创造（专利）产出的年份的总数（活动年数即第一件申请所在年开始到最新意见申请所在年，共包含多少年）<br />

										创新活动周期：平均一件专利的产出时间<br />

										最长创造力维持周期：从第一件专利申请所在年开始，持续每年有专利申请公开的连续年数<br />

										技术活动周期：研发技术领域的逐年变化
									</div>
								</el-popover>
							</div>
						</div>
					</el-col>
					<el-col :span="12" class="mb20">
						<el-table
							v-loading="loadings.cxHlState_rankList"
							:data="cxHlState.rankList"
							style="margin-top: 10px"
							border
							:cell-style="{ textAlign: 'center', height: '60px', color: '#333333' }"
							:header-cell-style="{ textAlign: 'center', height: '100px', color: '#333333' }"
						>
							<el-table-column prop="name" label="评价角度" show-overflow-tooltip />
							<el-table-column prop="year" label="年数/周期（年）" show-overflow-tooltip />
							<el-table-column prop="inndustryRanking" label="本产业内排名" show-overflow-tooltip> </el-table-column>
							<el-table-column prop="institutionalRanking" label="所属机构内排名" show-overflow-tooltip> </el-table-column>
						</el-table>
					</el-col>
					<el-col :span="12" class="mb20">
						<div class="box-title">{{ t('pages.Innovation_activity_curve') }}</div>
						<barCharts4 :talentId="route.query.talentId" :style="'width: 100%;height: 300px;'"></barCharts4>
					</el-col>
					<el-col :span="24" class="mb20">
						<div class="box-title">{{ t('pages.Technical_activity_cycle') }}</div>
						<lineCharts1 :talentId="route.query.talentId" :style="'width: 100%;height: 300px;'"></lineCharts1>
					</el-col>
				</el-row>
			</div>
			<div class="box-bar-row" id="c2Ref">
				<el-row :gutter="20">
					<el-col :span="24" class="mb20">
						<div class="title-wrap">
							<div class="title-left-wrap">
								<div class="title">{{ t('pages.Innovation_ability') }}</div>
								<div class="dec">通过“发明创造类型”、“被引证次数”、“发明权利状态”、“维持年限”角度进行评价，并分别给出在本产业的排名</div>
							</div>
							<div class="sm-wrap">
								<el-popover placement="top-start" :title="t('pages.Indicator_Description')" :width="300" trigger="hover">
									<template #reference>
										<div class="sm-wrap-s1">
											<img class="img" src="/@/assets/iconRC/wh.svg" alt="" sizes="" srcset="" />
											<span>{{ t('pages.Indicator_Description') }}</span>
										</div>
									</template>
									<div>
										被引证次情况：其专利被其他专利引用 <br />

										维持年限：专利获得授权的公告年开始计算其有效状态的维持年份总和
									</div>
								</el-popover>
							</div>
						</div>
					</el-col>
				</el-row>
				<el-row :gutter="40">
					<el-col :span="8" class="mb20">
						<div class="box-title">专利类型</div>
						<pieCharts :talentId="route.query.talentId" :style="'width: 100%;height: 390px;'"></pieCharts>
					</el-col>
					<el-col :span="8" class="mb20">
						<div class="box-title">{{ t('pages.Cited_situation') }}</div>
						<pieCharts2 :talentId="route.query.talentId" :style="'width: 100%;height: 390px;'"></pieCharts2>
					</el-col>
					<el-col :span="8" class="mb20">
						<div class="p-s1">
							<div class="item">
								共<span class="s1">{{ cxnlSate.citedNumber }}</span
								>件专利被引证，引证次数<span class="s1">{{ cxnlSate.citationNubmer }}</span
								>次
							</div>
							<div class="item">
								平均被引证次数:<span class="s1">{{ cxnlSate.avgCitationNubmer }}</span
								>次
							</div>
						</div>
						<div class="p-s2">
							<div class="item">
								<div class="s1">本产业内排名</div>
								<div class="s2">
									<span class="num">{{ cxnlSate.rank }}</span>
									<span class="b1">名</span>
								</div>
							</div>
							<div class="item">
								<div class="s1">所属机构内排名</div>
								<div class="s2">
									<span class="num">{{ cxnlSate.agencyRank }}</span>
									<span class="b1">名</span>
								</div>
							</div>
						</div>
						<el-table
							:data="CitationState.dataList"
							border
							style="margin-top: 10px"
							:cell-style="{ textAlign: 'center', color: '#333333' }"
							:header-cell-style="{ textAlign: 'center', color: '#333333' }"
						>
							<el-table-column type="index" label="序号" width="55" />
							<el-table-column prop="appNumber" label="专利申请号" show-overflow-tooltip />
							<el-table-column prop="patentName" label="专利名称" show-overflow-tooltip />
							<el-table-column prop="citationNumber" label="被引证次数" show-overflow-tooltip> </el-table-column>
						</el-table>
						<pagination
							@size-change="CitationState_all.sizeChangeHandle"
							@current-change="CitationState_all.currentChangeHandle"
							v-bind="CitationState.pagination"
						/>
					</el-col>
				</el-row>

				<el-row :gutter="40">
					<el-col :span="8">
						<div class="box-title">{{ t('pages.The_status_of_patent_rights') }}</div>
						<pieCharts3 :talentId="route.query.talentId" :style="'width: 100%;height: 390px;'"></pieCharts3>
						<el-table
							:data="cxnlSateNu.lprsList"
							border
							style="margin-top: 10px"
							:cell-style="{ textAlign: 'center', color: '#333333' }"
							:header-cell-style="{ textAlign: 'center', color: '#333333' }"
						>
							<el-table-column prop="lprs" :label="t('pages.The_status_of_patent_rights')" />
							<el-table-column prop="invention" label="发明" show-overflow-tooltip />
							<el-table-column prop="practical" label="实用新型" show-overflow-tooltip />
							<el-table-column prop="appearance" label="外观设计" show-overflow-tooltip> </el-table-column>
						</el-table>
					</el-col>
					<el-col :span="16">
						<div class="box-title">{{ t('pages.The_average') }}</div>
						<barCharts :talentId="route.query.talentId" :style="'width: 100%;height: 390px;'"></barCharts>
						<el-table
							:data="cxnlSateNu.patTypeList"
							border
							style="margin-top: 10px"
							:cell-style="{ textAlign: 'center', color: '#333333' }"
							:header-cell-style="{ textAlign: 'center', color: '#333333' }"
						>
							<el-table-column prop="patType" label="专利类型" />
							<el-table-column prop="avgKeepYear" label="平均维持年限" show-overflow-tooltip />
							<el-table-column prop="industryAvgKeepYear" label="本产业平均维持年限" show-overflow-tooltip />
							<el-table-column prop="industryRank" label="本产业内排名" show-overflow-tooltip> </el-table-column>
							<el-table-column prop="agencyAvgKeepYear" label="所属机构平均年维持年限" width="200" show-overflow-tooltip> </el-table-column>
							<el-table-column prop="agencyRank" label="所属机构排名" show-overflow-tooltip> </el-table-column>
						</el-table>
					</el-col>
				</el-row>

				<el-row :gutter="20" style="margin-top: 30px; margin-bottom: 20px">
					<el-col :span="12">
						<div class="box-title">{{ t('pages.Evaluation_of_Patent_Value') }}</div>
					</el-col>
				</el-row>
				<el-row :gutter="20">
					<el-col :span="12">
						<div class="jdt-wrap">
							<div class="content">
								<div class="name">主要研发领域所属产业的专利价值度均值</div>
								<el-progress :percentage="cxzhlState.avgValueDegree" stroke-width="8" width="100%" :format="() => {}" />
							</div>
							<div class="num-wrap">
								<div class="num">{{ cxzhlState.avgValueDegree }}</div>
								<span class="s1">分</span>
							</div>
						</div>
					</el-col>
					<el-col :span="12">
						<div class="jdt-wrap">
							<div class="content">
								<div class="name">本人参与或直接申请的专利价值度均值</div>
								<el-progress :percentage="cxzhlState.appAvgValueDegree" stroke-width="8" width="100%" :format="() => {}" />
							</div>
							<div class="num-wrap">
								<div class="num">{{ cxzhlState.appAvgValueDegree }}</div>
								<span class="s1">分</span>
							</div>
						</div>
					</el-col>
				</el-row>
			</div>

			<div class="box-bar-row" id="c3Ref">
				<el-row :gutter="20">
					<el-col :span="24" class="mb20">
						<div class="title-wrap">
							<div class="title-left-wrap">
								<div class="title">{{ t('pages.The_ability') }}</div>
								<div class="dec">通过“专利许可”、“专利质押”、“专利转让”角度进行评价，并分别给出在本产业的排名。</div>
							</div>
							<div class="sm-wrap">
								<el-popover placement="top-start" :title="t('pages.Indicator_Description')" :width="300" trigger="hover">
									<template #reference>
										<div class="sm-wrap-s1">
											<img class="img" src="/@/assets/iconRC/wh.svg" alt="" sizes="" srcset="" />
											<span>{{ t('pages.Indicator_Description') }}</span>
										</div>
									</template>
									<div>许可、转让、质押，是专利的三种运营情况。参与双方被称为出让人、让与人等</div>
								</el-popover>
							</div>
						</div>
					</el-col>
				</el-row>
				<el-row :gutter="20">
					<el-col :span="9" class="mb20">
						<div class="box-title" style="margin-bottom: 20px">{{ t('pages.Patent_license') }}</div>
						<el-descriptions border direction="vertical">
							<el-descriptions-item label="" width="150">所属机构为许可人</el-descriptions-item>
							<el-descriptions-item label="许可件数">{{ cxzhlState.licensePiece }}</el-descriptions-item>
							<el-descriptions-item label="许可次数">{{ cxzhlState.licenseNumber }}</el-descriptions-item>
							<el-descriptions-item label="">所属机构为被许可人</el-descriptions-item>
							<el-descriptions-item label="被许可件数">{{ cxzhlState.passiveLicensePiece }}</el-descriptions-item>
							<el-descriptions-item label="被许可次数">{{ cxzhlState.passiveLicenseNumber }}</el-descriptions-item>
						</el-descriptions>
					</el-col>
					<el-col :span="9" class="mb20">
						<div class="box-title" style="margin-bottom: 20px">{{ t('pages.Patent_Arrangement') }}</div>
						<el-descriptions border direction="vertical">
							<el-descriptions-item label="" width="150">所属机构为出让人</el-descriptions-item>
							<el-descriptions-item label="转让件数">{{ cxzhlState.transferPiece }}</el-descriptions-item>
							<el-descriptions-item label="转让次数">{{ cxzhlState.transferNumber }}</el-descriptions-item>
							<el-descriptions-item label="">所属机构为让与人</el-descriptions-item>
							<el-descriptions-item label="被许可件数">{{ cxzhlState.transferLicensePiece }}</el-descriptions-item>
							<el-descriptions-item label="被许可次数">{{ cxzhlState.transferLicenseNumber }}</el-descriptions-item>
						</el-descriptions>
					</el-col>
					<el-col :span="6" class="mb20">
						<div class="box-title" style="margin-bottom: 20px">{{ t('pages.Patent_pledge') }}</div>
						<el-descriptions border direction="vertical">
							<el-descriptions-item label="" width="150">所属机构为出让人</el-descriptions-item>
							<el-descriptions-item label="质押件数">{{ cxzhlState.preservationNumber }}</el-descriptions-item>
						</el-descriptions>
					</el-col>
				</el-row>
			</div>

			<div class="box-bar-row" id="c4Ref">
				<el-row :gutter="20">
					<el-col :span="24" class="mb20">
						<div class="title-wrap">
							<div class="title-left-wrap">
								<div class="title">{{ t('pages.Cooperative_research') }}</div>
								<div class="dec"></div>
							</div>
						</div>
					</el-col>
				</el-row>
				<el-row :gutter="20">
					<el-col :span="24" class="mb20">
						<xHCharts :talentId="route.query.talentId" :style="'width: 100%;height: 600px;'"></xHCharts>
					</el-col>
				</el-row>
			</div>
			<div class="box-bar-row" id="c5Ref">
				<el-row :gutter="20">
					<el-col :span="24" class="mb20">
						<div class="title-wrap">
							<div class="title-left-wrap">
								<div class="title">{{ t('pages.Areas_of_expertise') }}</div>
								<div class="dec"></div>
							</div>
						</div>
					</el-col>
				</el-row>
				<el-row :gutter="20">
					<el-col :span="12">
						<div class="box-title">{{ t('pages.Industry_segmentation_fields') }}</div>
						<barChartsC1 :talentId="route.query.talentId" :style="'width: 100%;height: 320px;'"></barChartsC1>
					</el-col>
					<el-col :span="12">
						<div class="box-title">{{ t('pages.International_patent_Classification') }}</div>
						<barChartsC2 :talentId="route.query.talentId" :style="'width: 100%;height: 320px;'"></barChartsC2>
					</el-col>
				</el-row>
			</div>
			<div class="box-bar-row" id="c6Ref">
				<el-row :gutter="20">
					<el-col :span="24" class="mb20">
						<div class="title-wrap">
							<div class="title-left-wrap">
								<div class="title">{{ t('pages.Innovation_List') }}</div>
								<div class="dec"></div>
							</div>
							<div class="tabs-wrap">
								<div
									class="tabs-item"
									@click="tabsChange(index)"
									:class="index == TabActive && 'active'"
									v-for="(item, index) in TabList"
									:key="item.label"
								>
									{{ item.label }}
								</div>
							</div>
						</div>
					</el-col>
				</el-row>
				<el-table
					v-if="TabActive == 0"
					:data="state.dataList"
					v-loading="state.loading"
					border
					:cell-style="tableStyle.cellStyle"
					:header-cell-style="tableStyle.headerCellStyle"
				>
					<el-table-column type="index" label="序号" width="55" />
					<el-table-column prop="appNumberOriginal" label="申请号" show-overflow-tooltip />
					<el-table-column prop="title" label="名称" show-overflow-tooltip />
					<el-table-column prop="appDate" label="申请日" sortable show-overflow-tooltip />
					<el-table-column prop="legalStatus" label="法律状态" show-overflow-tooltip />
					<el-table-column prop="inventorName" label="发明人" show-overflow-tooltip />
					<el-table-column prop="applicantName" label="申请人" show-overflow-tooltip >
						<template #default="scope">
							<div class="valueDegree" @click="handleValueDegree2(scope.row)">{{ scope.row.applicantName }}</div>
						</template>
					</el-table-column>
					<el-table-column prop="valueDegree" label="专利价值度" sortable show-overflow-tooltip >
						<template #default="scope">
							<div class="valueDegree" @click="handleValueDegree(scope.row)">{{ scope.row.valueDegree }}</div>
						</template>
					</el-table-column>
				</el-table>
				<el-table
					v-if="TabActive == 1"
					:data="state.dataList"
					v-loading="state.loading"
					border
					:cell-style="tableStyle.cellStyle"
					:header-cell-style="tableStyle.headerCellStyle"
				>
					<el-table-column type="index" label="序号" width="55" />
					<el-table-column prop="award" label="奖项" show-overflow-tooltip />
					<el-table-column prop="awardTimes" label="届次" show-overflow-tooltip />
					<el-table-column prop="appNumberOriginal" label="专利号" show-overflow-tooltip />
					<el-table-column prop="title" label="专利名称" show-overflow-tooltip />
					<el-table-column prop="patentee" label="专利权人" show-overflow-tooltip />
					<el-table-column prop="inventorName" label="发明人" show-overflow-tooltip />
				</el-table>
				<pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" />
			</div>
			<div class="d-d" v-dragSwitch="true">
				<div class="d-d_container" style="">
					<div class="d-d_container_header">
						<div class="soc-nav">
							<div
								class="nav-item"
								:class="scrollState.activeSocNav == item.id && 'active'"
								@click="changeNav(item.id)"
								v-for="item in scrollState.socNavList"
								:key="item.id"
							>
								{{ item.name }}
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<previewPDF2 ref="previewPDF2Ref"></previewPDF2>
</template>

<script setup lang="ts">
import { BasicTableProps, useTable } from '/@/hooks/table';
import { BasicUseScrollNav, useScrollNav } from '/@/hooks/scrollNav';
import other from '/@/utils/other';
import {
	getInfoTalentId,
	getTalentInnovatePage,
	patentCollect,
	getPatentCitation,
	getPatentCitationPage,
	unCollect,
	getTalentCycleList,
	getPatentPatType,
	getPatentLprs,
	getValueConversion,
	summaryDownload
} from '/@/api/cx/list';
const pieCharts = defineAsyncComponent(() => import('./Echarts/pieCharts.vue'));
const pieCharts2 = defineAsyncComponent(() => import('./Echarts/pieCharts2.vue'));
const pieCharts3 = defineAsyncComponent(() => import('./Echarts/pieCharts3.vue'));
const barCharts = defineAsyncComponent(() => import('./Echarts/barCharts.vue'));
const barCharts4 = defineAsyncComponent(() => import('./Echarts/barCharts4.vue'));
const lineCharts1 = defineAsyncComponent(() => import('./Echarts/lineCharts1.vue'));
const TvvjG8Charts = defineAsyncComponent(() => import('./Echarts/TvvjG8Charts.vue'));
const xHCharts = defineAsyncComponent(() => import('./Echarts/xHCharts.vue'));
const barChartsC1 = defineAsyncComponent(() => import('./Echarts/barChartsC1.vue'));
const barChartsC2 = defineAsyncComponent(() => import('./Echarts/barChartsC2.vue'));
const previewPDF2 = defineAsyncComponent(()=>import('/@/components/previewPDF/index2.vue'))
const previewPDF2Ref = ref()
const router = useRouter();
const route = useRoute();
import { useI18n } from 'vue-i18n';
const { t, locale } = useI18n();

// 发明人个人信息
const userInfo = ref<any>({});

// 创新活力数据
const cxHlState = reactive<any>({
	//排名
	rankList: [],
});

// loding
const loadings = reactive<any>({
	cxHlState_rankList:false
})

// 创新能力数据
const cxnlSate = reactive<any>({
	citedNumber: '', // 被引证件数
	citationNubmer: '', // 引证次数
	avgCitationNubmer: '', //平均被引证次数
	rank: '', //本产业内排名
	agencyRank: '', //所属机构内排名
	citations: [], //专利引证列表
});
// 创新能力数据-专利权力状态汇总
const cxnlSateNu = reactive<any>({
	lprsList: [], // 专利权力状态汇总
	patTypeList: [], // 专利类型汇总
});
// 创新转化力(包含专利价值度)
const cxzhlState = ref<any>({});

// 切换
const TabList = ref<any>([
	{
		label: '专利',
		value: 'patent',
	},
	// {
	// 	label: '期刊',
	// 	value: 2,
	// },
	{
		label: '获奖',
		value: 'awardFlag',
	},
]);
const TabActive = ref<any>(0);

const state: BasicTableProps = reactive<BasicTableProps>({
	queryForm: {
		patent: TabList.value[TabActive.value].value == 'patent' ? 1 : 0,
		awardFlag: TabList.value[TabActive.value].value == 'awardFlag' ? 1 : 0,
		talentId: route.query.talentId,
	},
	pageList: getTalentInnovatePage,
});
// 创新清单 table hook
const { getDataList, currentChangeHandle, sizeChangeHandle, sortChangeHandle, downBlobFile, tableStyle } = useTable(state);

// 右侧滚动导航hook
const scrollState = reactive<BasicUseScrollNav>({
	// 导航list
	socNavList: [
		{
			id: '#c1Ref',
			name: '创新活力',
		},
		{
			id: '#c2Ref',
			name: '创新能力',
		},
		{
			id: '#c3Ref',
			name: '创新转化力',
		},
		{
			id: '#c4Ref',
			name: '合作研发',
		},
		{
			id: '#c5Ref',
			name: '擅长领域',
		},
		{
			id: '#c6Ref',
			name: '创新清单',
		},
	],
	// 导航active
	activeSocNav: '#c1Ref',
	// 滚动导航容器id
	ParentId: '#layout-app',
});
// 右侧滚动导航hook
const { changeNav } = useScrollNav(scrollState);

// 收藏切换
function CollectionChange() {
	if (!userInfo.value.collectId) {
		let param = {
			talentId: userInfo.value.id,
		};
		patentCollect(param).then((res) => {
			if (res.code == 0) {
				getinfo();
			}
		});
	} else {
		let param = {
			id: Number(userInfo.value.collectId),
		};
		unCollect(param).then((res) => {
			if (res.code == 0) {
				getinfo();
			}
		});
	}
}
// 跳转人才查询--机构
function toUrlAgency(val: any) {
	router.push({
		path: '/home/result',
		query: {
			agency: val,
		},
	});
}
// 跳转人才查询--细分领域
function toUrlIndustry(val: any) {
	console.log(val);
	router.push({
		path: '/home/result',
		query: {
			industry: val.id,
		},
	});
}

function tabsChange(index: number) {
	TabActive.value = index;
	state.queryForm.patent = TabList.value[TabActive.value].value == 'patent' ? 1 : 0;
	state.queryForm.awardFlag = TabList.value[TabActive.value].value == 'awardFlag' ? 1 : 0;
	getDataList();
}
// 切换end

// 查询创新人才画像个人信息
function getinfo() {
	getInfoTalentId(route.query.talentId).then((res) => {
		console.log('res', res);
		if (res.code == 0) {
			userInfo.value = res.data;
		}
	});
}
// 标签样式
function tagColor(index: any) {
	let s1 = Number(index) % 3;
	switch (s1) {
		case 0:
			return 'primary';
			break;
		case 1:
			return 'warning';
			break;
		case 2:
			return 'success';
			break;
		default:
			break;
	}
}

// 创新能力表table
const CitationState = reactive<any>({
	queryForm: {
		talentId: route.query.talentId,
	},
	pagination: {
		size: 5,
		layout: 'prev, pager, next,',
	},
	pageList: getPatentCitationPage,
});
const CitationState_all = useTable(CitationState);
// 获取创新能力
function FnGetPatentCitation() {
	let param = {
		talentId: route.query.talentId,
	};
	getPatentCitation(param).then((res) => {
		if (res.code == 0) {
			cxnlSate.citedNumber = res.data.citedNumber;
			cxnlSate.citationNubmer = res.data.citationNubmer;
			cxnlSate.avgCitationNubmer = res.data.avgCitationNubmer;
			cxnlSate.rank = res.data.rank;
			cxnlSate.agencyRank = res.data.agencyRank;
			cxnlSate.citations = res.data.citations;
		}
	});
}

// 获取创新活力数据
function FngetTalentCycleList() {
	let param = {
		talentId: route.query.talentId,
	};
	loadings.cxHlState_rankList = true
	getTalentCycleList(param).then((res) => {
		if (res.code == 0) {
			cxHlState.rankList = res.data;
		}
	}).finally(()=>{
		loadings.cxHlState_rankList = false
	});
}
// 获取专利类型汇总
function FngetPatentPatType() {
	let param = {
		talentId: route.query.talentId,
	};
	getPatentPatType(param).then((res) => {
		if (res.code == 0) {
			cxnlSateNu.patTypeList = res.data;
		}
	});
}
// 获取专利权利状态汇总
function FngetPatentLprs() {
	let param = {
		talentId: route.query.talentId,
	};
	getPatentLprs(param).then((res) => {
		if (res.code == 0) {
			cxnlSateNu.lprsList = res.data;
		}
	});
}
// 获取专利价值度-创新转化力
function FngetValueConversion() {
	let param = {
		talentId: route.query.talentId,
	};
	getValueConversion(param).then((res) => {
		if (res.code == 0) {
			console.log('conversion', res);
			cxzhlState.value = res.data;
		}
	});
}

// 下载pdf
function handleValueDegree(val:any){
	if(val.pubNumberOriginal){
		other.downBlobFile(`/talent/summary/download`, {pubNumber:val.pubNumberOriginal}, `${val.pubNumberOriginal}.pdf`);
	}
}

// 下载pdf2
function handleValueDegree2(val:any){
	if(val.applicantName){
		other.downBlobFile(`/talent/summary/download`, {pubNumber:val.applicantName}, `${val.applicantName}.pdf`);
	}
}

onMounted(() => {
	FngetTalentCycleList();
	FnGetPatentCitation();
	FngetPatentPatType();
	FngetPatentLprs();
	FngetValueConversion();
	getDataList();
	getinfo();
});
</script>

<style lang="scss" scoped>
.layout-padding {
	background: #e9ecf3;
}
.main {
	//padding: 20px;
	.title-wrap {
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1px solid #eee;
		padding-bottom: 18px;
		.title-left-wrap {
			display: flex;
			align-items: flex-end;
			.title {
				font-size: 24px;
				color: #333333;
				font-weight: 500;
				line-height: 1;
			}
			.dec {
				font-size: 14px;
				color: #333333;
				margin-left: 20px;
				line-height: 1;
			}
		}
	}
	.box-title {
		font-size: 18px;
		font-weight: bold;
		color: #333333;
		position: relative;
		padding-left: 20px;
		line-height: 1;
		// &::before {
		// 	content: '';
		// 	display: block;
		// 	position: absolute;
		// 	left: 0;
		// 	top: 50%;
		// 	transform: translateY(-50%);
		// 	width: 14px;
		// 	height: 26px;
		// 	background-color: #2a74af;
		// }
	}
}
.p-s1 {
	margin-bottom: 20px;
	.item {
		font-size: 16px;
		color: #000000;
		.s1 {
			font-size: 30px;
			color: var(--el-color-primary);
			padding: 0 5px;
			font-weight: bold;
		}
	}
}
.p-s2 {
	display: flex;
	justify-content: space-between;
	align-items: center;
	.item {
		padding: 0 15px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 240px;
		height: 72px;
		background: #f8fcff;
		border-radius: 10px 10px 10px 10px;
		.s1 {
			font-weight: 500;
			font-size: 18px;
			color: #333333;
		}
		.s2 {
			.num {
				font-weight: bold;
				font-size: 30px;
				color: #333333;
			}
			.b1 {
				font-weight: 400;
				font-size: 14px;
				color: #333333;
				margin-left: 10px;
			}
		}
	}
}
.user-box {
	padding: 40px 30px;
	//border: 1px solid #eee;
	height: 370px;
	.s1-row {
		display: flex;
		margin-bottom: 30px;
		.tx-wrap {
			width: 96px;
			height: 96px;
			overflow: hidden;
			background: #e9ecf3;
			border-radius: 10px 10px 10px 10px;
			margin-right: 30px;
			.img {
				width: 100%;
				height: 100%;
			}
		}
		.user-wrap {
			.user-s1 {
				display: flex;
				align-items: center;
				margin-bottom: 20px;
				.name {
					font-size: 26px;
					color: #333333;
					margin-right: 30px;
				}
				.sc-wrap {
					padding: 0 10px;
					height: 32px;
					background: #d8dbe2;
					border-radius: 16px 16px 16px 16px;
					display: flex;
					align-items: center;
					justify-content: center;
					cursor: pointer;
					&.active {
						background: #fba632;
					}
					img {
						width: 20px;
						height: 20px;
						line-height: 1;
					}
					.text {
						font-size: 16px;
						color: #fff;
						line-height: 1;
					}
				}
			}
			.bq-wrap {
				.tag {
					& + .tag {
						margin-left: 10px;
					}
				}
			}
		}
	}
	.s2-row {
		.row-item {
			display: flex;
			align-items: center;
			& + .row-item {
				margin-top: 20px;
			}
			.icon {
				width: 18px;
				margin-right: 10px;
			}
			.text {
				font-size: 14px;
				color: #333333;
				span {
					margin-left: 10px;
					&.s1 {
						color: var(--el-color-primary);
						cursor: pointer;
					}
					&.s2 {
						color: #999a9d;
					}
				}
			}
		}
	}
}
.cx-box {
	padding: 20px;
	//border: 1px solid #eee;
	height: 370px;
	display: flex;
	align-items: center;
	.box-left {
		width: 348px;

		.left-p {
			font-size: 16px;
			color: #333;
			padding: 5px 0;
			display: flex;
			align-items: center;
			width: 348px;
			height: 72px;
			background: #f9fcff;
			border-radius: 10px 10px 10px 10px;
			padding: 20px;
			& + .left-p {
				margin-top: 15px;
			}
			.img {
				width: 37px;
				height: 37px;
				margin-right: 13px;
			}
			.s0 {
				font-size: 18px;
				color: #333333;

				font-weight: 600;
				width: 160px;
			}
			.s1 {
				font-size: 30px;
				color: #333333;
				margin-right: 5px;
				font-weight: 600;
			}
			.s2 {
				font-size: 14px;
				color: #333333;
				font-weight: 600;
			}
		}
		&.en{
			.left-p {
				.s0{
					font-size: 14px;
				}
			}
		}
	}
	.TvvjG8Charts {
		flex: 1;
	}
}
.box-bar {
	background-color: #fff;
	border-radius: 10px 10px 10px 10px;
}
.box-bar-row {
	background-color: #fff;
	border-radius: 10px 10px 10px 10px;
	padding: 20px;
	margin-bottom: 20px;
}
.soc-nav {
	// position: fixed;
	// right: 20px;
	// top: 50%;
	//transform: translateY(-50%);
	//z-index: 999;
	box-shadow: 3px 0px 35px 0px #dfe6f0;
	border-radius: 10px 10px 10px 10px;
	background: #ffffff;
	padding: 10px;
	.nav-item {
		width: 100px;
		height: 32px;
		line-height: 1;
		border-radius: 6px 6px 6px 6px;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		&.active {
			background: var(--el-color-primary);
			color: #fff;
		}
	}
}
.sm-wrap {
	.sm-wrap-s1 {
		display: flex;
		align-items: center;
		.img {
			margin-right: 10px;
			width: 18px;
		}
		span {
			font-size: 14px;
		}
	}
}
.tabs-wrap {
	display: flex;
	border: 1px solid #e4e7ed;
	.tabs-item {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 26px;
		width: 75px;
		cursor: pointer;
		& + .tabs-item {
			border-left: 1px solid #e4e7ed;
		}
		&.active {
			background: #2a74af;
			color: #fff;
		}
	}
}
.jdt-wrap {
	height: 82px;
	background: #f8fcff;
	border-radius: 10px 10px 10px 10px;
	display: flex;
	align-items: center;
	padding: 0 18px;
	width: 100%;
	.content {
		width: 100%;
		.name {
			font-weight: 500;
			font-size: 18px;
			color: #333333;
			margin-bottom: 10px;
		}
	}
	.num-wrap {
		display: flex;
		align-items: center;
		margin-top: 27px;
		.num {
			font-weight: bold;
			font-size: 30px;
			color: var(--el-color-primary);
		}
		.s1 {
			font-weight: 400;
			font-size: 14px;
			color: #333333;
			margin-left: 10px;
		}
	}
}
.d-d {
	width: auto;
	height: auto;
	position: absolute;
	.d-d_container {
		position: fixed;
		left: 15px;
		top: 50%;
		width: 120px;
		z-index: 999;
		.d-d_container_header {
		}
	}
}
.valueDegree{
	&:hover{
		color: var(--el-color-primary);
		text-decoration: underline;
		cursor: pointer;
	}
}
</style>
